import api from './api.js';
import List from './list.js';
import Cart from './cart.js';

export default{
    components: {
        List,
        Cart
    },
    template: `
        <div class="common-layout">
            <el-container>
                <el-header>
                  <div class="header-content">
                      <div class="logo">
                        <img src="./img/logo.png" class="logo-img" alt="logo"/>
                        <el-text class="logo-text">东软饭店</el-text>
                      </div>
                      <div class="userInfo">
                        <el-dropdown v-if="isLoggedIn">
                          <span class="el-dropdown-link">
                            <el-avatar src="./img/avatar.png"></el-avatar>
                            {{ userInfo.username }}
                          </span>
                          <template #dropdown>
                            <el-dropdown-menu slot="dropdown">
                              <el-dropdown-item>查看个人信息</el-dropdown-item>
                              <el-dropdown-item>退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                          </template>
                        </el-dropdown>
                        <div v-else>
                          <el-button type="info" round class="custom-button" @click="openDialog">登录</el-button>
                        </div>
                      </div>
                  </div>
                </el-header>
                <el-container>
                <el-aside width="200px">
                    <el-menu default-active="1" class="el-menu-vertical-demo" @select="handleSelect">
                    <el-menu-item index="1">精品餐谱</el-menu-item>
                    <el-menu-item index="2">我的点餐</el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    <component :is="selectedMenu"></component>                                      
                </el-main>
                </el-container>
            </el-container>

            <el-dialog v-model="dialogFormVisible" title="登录/注册" width="500"  class="dialog">
              <el-form :model="form"  class="dialog-form">
                <el-form-item label="账号" :label-width="formLabelWidth">
                  <el-input v-model="form.username" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                  <el-input v-model="form.password" autocomplete="off" />
                </el-form-item>
              </el-form>
              <template #footer>
                <div class="dialog-footer">
                  <el-button @click="handleLogin">登录</el-button>
                  <el-button type="primary" @click="handleRegister">注册</el-button>
                </div>
              </template>
            </el-dialog>
          </div>
    `,
    data() {
      return {
        isLoggedIn: false, // 假设用户初始状态为未登录
        dialogFormVisible: false, // 是否显示登录对话框
        selectedMenu: List, // 默认显示 HTML
        form: {
          username: '',
          password: ''
        },
        userInfo: {
          id: 0,
          username: 'anonymous',
          password: ''
        },
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        switch(key) {
          case '1':
            this.selectedMenu = List;
            break;
          case '2':
            this.selectedMenu = Cart;
            break;
        }
      },
      handleLogin() {
        // 处理登录逻辑
        const user = {
          username: this.form.username,
          password: this.form.password
        };
    
        api.loginUser(user)
          .then(response => {
            // 登录成功，处理响应
            user.id = response.data.id;
            this.userInfo = user;
            isLoggedIn = true;
            this.dialogFormVisible = false;
          })
          .catch(error => {
            // 登录失败，处理错误
            console.error(error);
          });
      },
      handleRegister() {
        this.dialogFormVisible = false;// 处理注册逻辑
      },
      openDialog() {
        this.dialogFormVisible = true;
      },
      closeDialog() {
        this.dialogFormVisible = false;
      }
    }
};